<template>
  <view class="package-list">
    <!-- 搜索区域 -->
    <view class="search-bar">
      <input
        class="search-input"
        v-model="searchName"
        placeholder="套餐名称"
      />
      <button class="search-btn" @click="handleSearch">搜索</button>
      <button class="reset-btn" @click="handleReset">重置</button>
    </view>
    <!-- 新增按钮 -->
    <button class="add-btn" @click="handleAdd">+ 新增</button>
    <!-- 套餐列表 -->
    <view class="package-item" v-for="(item, index) in filteredPackageList" :key="index">
      <view class="school-info">
        <text class="label">学校</text>
        <text class="value">{{ item.school }}</text>
      </view>
      <view class="package-info">
        <text class="label">套餐</text>
        <text class="value">{{ item.package }}</text>
      </view>
      <view class="operate-btn-group">
        <button class="edit-btn" @click="handleEdit(index)">编辑</button>
        <button class="delete-btn" @click="handleDelete(index)">删除</button>
      </view>
    </view>
    <!-- 底部确定和关闭按钮 -->
    <view class="bottom-btn-group">
      <button class="confirm-btn" @click="handleConfirm">确定</button>
      <button class="close-btn" @click="handleClose">关闭</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchName: '', // 搜索的套餐名称
      packageList: [
        { school: '贵州职业技术学院', package: '潮玩卡21元/月' },
        { school: '贵州职业技术学院', package: '潮玩卡20元/月' },
        { school: '会展大市场', package: '会展129新入网打5折' },
        { school: '贵阳职业技术学院', package: '潮玩卡21元/月.' },
        { school: '贵阳职业技术学院', package: '潮玩卡20元/月.' },
        { school: '贵州财经大学（花溪大学城）', package: '潮玩卡20元/月。' },
        { school: '贵州交通职业技师学院（中专）', package: '芒果卡21元/月！' },
        { school: '贵阳经贸学校（老阳关校区）', package: '潮玩卡20元/月,' }
        // 可根据实际从接口获取数据动态填充
      ]
    };
  },
  computed: {
    filteredPackageList() {
      // 根据搜索名称过滤套餐列表
      if (!this.searchName) {
        return this.packageList;
      }
      return this.packageList.filter(item =>
        item.package.includes(this.searchName)
      );
    }
  },
  methods: {
    handleSearch() {
      // 可在此处结合接口，根据搜索条件请求数据，这里先做本地过滤演示
      console.log('搜索套餐：', this.searchName);
    },
    handleReset() {
      this.searchName = '';
    },
    handleAdd() {
      // 新增套餐逻辑，可跳转到新增页面或弹出弹窗等
      uni.showToast({
        title: '新增套餐功能待实现',
        icon: 'none'
      });
    },
    handleEdit(index) {
      // 编辑套餐逻辑，可获取对应数据跳转到编辑页面等
      const item = this.filteredPackageList[index];
      uni.showToast({
        title: `编辑【${item.school} - ${item.package}】`,
        icon: 'none'
      });
    },
    handleDelete(index) {
      // 删除套餐逻辑，可提示确认后删除数组对应项等
      uni.showModal({
        title: '提示',
        content: '确定删除该套餐吗？',
        success: res => {
          if (res.confirm) {
            this.filteredPackageList.splice(index, 1);
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
          }
        }
      });
    },
    handleConfirm() {
      // 确定按钮逻辑，比如提交选中套餐等
      uni.showToast({
        title: '确定功能待实现',
        icon: 'none'
      });
    },
    handleClose() {
      // 关闭页面逻辑
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.package-list {
  padding: 10px;
}
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.search-input {
  flex: 1;
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 8px;
}
.search-btn,
.reset-btn {
  margin-left: 8px;
}
.add-btn {
  margin-bottom: 10px;
}
.package-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
}
.school-info,
.package-info {
  flex: 1;
}
.label {
  font-weight: bold;
  margin-right: 4px;
}
.operate-btn-group {
  display: flex;
}
.edit-btn,
.delete-btn {
  margin-left: 8px;
}
.bottom-btn-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.confirm-btn,
.close-btn {
  margin-left: 8px;
}
</style>